<template>
  <div>
    <a-form-item label="疾病名称" style="width: 400px">
      <a-input v-model:value="formState.diseaseName" />
    </a-form-item>
    <a-form-item label="疾病分类" style="width: 400px">
      <a-tree-select
        v-model="value"
        show-search
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        placeholder="Please select"
        allow-clear
        multiple
        tree-default-expand-all
        :tree-data="treeData"
        :show-checked-strategy="SHOW_PARENT"
        @change="selectChange"
      ></a-tree-select
      >
    </a-form-item>
    <h1>概述:</h1>
    <v-md-editor v-model="formState.overview" height="400px"></v-md-editor>
    <h1>病因:</h1>
    <v-md-editor v-model="formState.etiology" height="400px"></v-md-editor>
    <h1>症状:</h1>
    <v-md-editor v-model="formState.symptoms" height="400px"></v-md-editor>
    <h1>就医:</h1>
    <v-md-editor v-model="formState.medicalTreatment" height="400px"></v-md-editor>
    <div class="handleBtn">
      <a-button type="primary" @click="handle">{{
        cpnState == "add" ? "创建" : "修改"
      }}</a-button>
    </div>
  </div>
</template>

<script>
import {
  h,
  ref,
  toRefs,
  reactive,
  onMounted,
  computed,
  watch,
  createVNode,
} from "vue";
import Service from "@/api/service";
import { message, TreeSelect } from "ant-design-vue";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

export default {
  props: ["cpnState", "diseaseData"],
  setup(props, context) {
    const state = reactive({
      formState: {
        diseaseName: "",
        type: null,
        overview: "",
      },
      detail: "",
      treeValue: ["parent 1-0", "leaf1"],
    });
    const value = ref(["0-0"]);
    const treeData = ref([
      {
        title: "按类型",
        value: "0-0",
        children: [
          {
            title: "Child Node1",
            value: "0-0-0",
          },
        ],
      },
    ]);
    onMounted(async () => {
      console.log("props", props);
      if (props.diseaseData) {
        state.formState = props.diseaseData;
        // treeData.value = JSON.parse(props.diseaseData.type);
      }
      console.log("state:", state);
      getAllType();
    });
    // 获取疾病分类
    const getAllType = async () => {
      let map = [
        {
          title: "按类型",
          value: 999,
          disabled: true,
          children: [],
        },
        {
          title: "按部位",
          value: 998,
          disabled: true,
          children: [],
        },
        {
          title: "按科室",
          value: 997,
          disabled: true,
          children: [],
        },
      ];
      const { data: res } = await Service.getAllType();
      res.data.forEach((item) => {
        let obj = {
          title: item.typeName,
          value: item.id,
        };
        if (item.class == "1") {
          map[0].children.push(obj);
        } else if (item.class == "2") {
          map[1].children.push(obj);
        } else if (item.class == "3") {
          map[2].children.push(obj);
        }
      });
      console.log('疾病分类:',map);
      treeData.value = map;
    };
    // 创建/修改
    const handle = async () => {
      console.log(state.formState);

      let res = "";
      if (props.cpnState == "add") {
        res = await Service.postAddDisease(state.formState);
      } else {
        res = await Service.editDisease(state.formState);
      }
      if (res.code == "0") {
        message.success(res.message);
        context.emit("refreshList");
      }
      console.log(res);
    };
    // 分类选中事件
    const selectChange = async (value, lable, extra) => {
      console.log(value, lable, extra);
      let arr = [];
      for (let i = 0; i < value.length; i++) {
        let obj = {
          title: lable[i],
          value: value[i],
        };
        arr.push(obj);
      }
      state.formState.type = JSON.stringify(arr);
    };
    return {
      ...toRefs(state),
      value,
      treeData,
      handle,
      getAllType,
      selectChange,
      SHOW_PARENT,
    };
  },
};
</script>

<style lang='less' scoped>
h1 {
  margin: 30px 0px;
}
.handleBtn {
  text-align: center;
  margin: 50px 0px 20px 0px;
}
</style>
